<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情页</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/详情页.css" />
    <link rel="stylesheet" href="./fonts/iconfont.css" />
  </head>
  <body>
    <!-- top S  -->
    <div class="top" id="one">
      <div class="w">
        <div class="fl">
          品有购欢迎您！
          <a href="#">请登录</a>
          <a href="#" class="col">免费注册</a>
        </div>
        <div class="fr">
          <a href="#"> 我的订单</a>
          <span>|</span>
          <a href="#" class="sj"> 我的品优购</a>
          <span>|</span>
          <a href="#"> 品优购会员</a>
          <span>|</span>
          <a href="#"> 企业采购</a>
          <span>|</span>
          <a href="#" class="sj1"> 关注品优购</a>
          <span>|</span>
          <a href="#" class="sj2"> 客户服务</a>
          <span>|</span>
          <a href="#" class="sj3"> 网站导航</a>
        </div>
      </div>
    </div>
    <!-- nav S  -->
    <div class="w">
      <div class="nav">
        <div class="logo">
          <img src="../img/logo.png" alt="" />
          <div class="sk"><img src="./img/sk.png" alt="" /></div>
        </div>

        <div class="search">
          <form action="">
            <input type="text" placeholder="语言开发" />
            <button>搜索</button>
            <div class="nav-list">
              <a href="#" class="cur">优惠购首发</a>
              <a href="#">亿元优惠</a>
              <a href="#">9.9元团购</a>
              <a href="#">美满99减30</a>
              <a href="#">办公用品</a>
              <a href="#">电脑</a>
            </div>
          </form>
          <div class="shopcar">
            <span class="iconfont">&#xe638;</span> 我的购物车<span
              >&nbsp;></span
            >
            <i></i>
          </div>
        </div>
      </div>
    </div>
    <!-- tonglan -->
    <div class="nav2">
      <div class="w">
        <div class="all">
          <a href="#">品优秒杀</a>
          <a href="#">即将售罄</a>
          <a href="#">超值低价</a>
        </div>
      </div>
      <div class="all-lis">
        <ul>
          <li><a href="#">女装</a></li>
          <li><a href="#" class="cur">女鞋</a></li>
          <li><a href="#">男装</a></li>
          <li><a href="#">男鞋</a></li>
          <li><a href="#">母婴童装</a></li>
          <li><a href="#">智能数码</a></li>
          <li><a href="#">户外运动</a></li>
          <li><a href="#" class="sj">更多分类</a></li>
        </ul>
      </div>
    </div>
    <!-- 面包屑S  -->
    <div class="bread">
      <div class="w">
        <div class="bread-l fl">
          <ul>
            <li><a href="#">手机通讯</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">小米（Mi）</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">小米小米11 Pro</a></li>
          </ul>
        </div>
        <div class="bread-r fr">
          <ul>
            <li><a href="javascript:;">小米京东自营旗舰店</a></li>
            <li><a href="javascript:;">联系客服</a></li>
            <li><a href="javascript:;">关注店铺</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 面包屑E  -->
    <!-- 产品preduct S  -->
    <div class="w clearfix">
      <div class="preduct">
        <div class="pre-l">
          <div class="prt"><img src="./img/pic1.jpg" alt="" /></div>
          <p><span>直降500 白条24期免息</span> &nbsp;<span>(7.1-7.2)</span></p>
        </div>
        <div class="pre-r">
          <div class="ks">
            小米11 Pro 5G 骁龙888 2K AMOLED四曲面柔性屏 67W无线闪充 3D玻璃工艺
            8GB+256GB 绿色 游戏手机
          </div>
          <div class="ad">
            【11Pro优惠500，到手价4799，享白条24期免息】AMOLED四曲面柔性屏，67W无线闪充【小米11ultra优惠500戳】
            <a href="javascript:;">
              查看 <span class="iconfont">&#xe616;</span></a
            >
          </div>
          <div class="ms">
            <strong>京东秒杀</strong>
            <div class="tim">
              距离结束
              <span>20</span>:<span>18</span>:<span>31</span>
            </div>
          </div>
          <div class="sha clearfix">
            <div class="pl">秒杀价</div>
            <div class="pl-msg">
              <span>￥4799.00</span>
              <s>[￥5299.00]</s>
              <a href="#">降价通知</a>
            </div>
          </div>
          <div class="sha clearfix cuxiao">
            <div class="pl">促 销</div>
            <div class="cx">
              <div class="zengpin">
                <i>赠品</i><span>X1</span><span>X1</span>(赠完为止)
              </div>
              <div class="xiangou">
                <i>限购 </i>
                购买不超过50件时享受单件价￥4769，超出数量以结算价为准
              </div>
            </div>
          </div>
          <div class="zz">
            <div class="pl">增值业务</div>
            <div class="huishou">
              <a href="#"><span>高价回收，极速到账</span></a>
            </div>
          </div>
          <div class="zz ps">
            <div class="pl">配送至</div>
            <div class="pei">
              <div class="peisong fl">
                <span>浙江省杭州市 <b class="iconfont">&#xec40;</b></span>
              </div>
              <strong>有货</strong>
              <i>支持</i>
              <a href="#">可配送海外</a>
              <a href="#">99元免基础运费</a>
            </div>
          </div>
          <div class="zz zhong">
            <div class="pl">重量</div>
            <div class="huishou">0.4kg</div>
          </div>
          <!-- 选择颜色 -->
          <div class="choose clearfix">
            <div class="ch-l">选择颜色</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">黑色</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="ch-l">选择版本</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">18G+128G</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="ch-l">购买方式</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">套装版（赠充电器）</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="ch-l">原厂服务</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">一年原厂延保￥199.00</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="ch-l">增值保障</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">2年碎屏换屏￥299.00</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="ch-l">京东服务</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">黑色</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="choose clearfix">
            <div class="ch-l">白条分期</div>
            <div class="ch-r">
              <ul>
                <li><a href="#">黑科技充电宝￥129.00</a></li>
                <li><a href="#">绿色</a></li>
                <li><a href="#">紫色</a></li>
              </ul>
            </div>
          </div>
          <div class="join clearfix">
            <div class="jo-l">
              <input type="text" value="1" />
              <span>+</span>
              <span>-</span>
            </div>
            <a href="#" class="fl">加入购物车</a>
          </div>
          <div class="wx clearfix">温馨提示.支持7天无理由退货</div>
        </div>
      </div>
    </div>
    <!-- tab  -->
    <div class="w clearfix">
      <div class="tab">
        <div class="slide">
          <div class="td">
            <h3>小米京东自营旗舰店</h3>
            <div class="btn">
              <a href="#"><span>进店逛逛</span></a>
              <a href="#"><span>关注店铺</span></a>
            </div>
            <div class="daren">
              <h3>达人选购</h3>
              <div class="sj">
                <img src="./img/s1.jpg" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
                <img src="./img/s2.jpg" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
                <img src="./img/s3.png" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
                <img src="./img/s2.jpg" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
                <img src="./img/s3.png" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
                <img src="./img/s1.jpg" alt="" />
                <a href="#">Apple 苹果iPhone 12双卡双待5G手机 黑色 256G</a
                ><br />
                <strong>￥6799.00</strong>
              </div>
              <div class="hot-sale">
                <div class="hs">
                  <h3>热销榜</h3>
                  <ul>
                    <li class="prise pr">价位</li>
                    <li class="prise">品牌</li>
                    <li class="prise">排行</li>
                  </ul>
                  <div class="num">
                    <em>1</em>
                    <img src="./img/hs1.jpg" alt="" />
                    <dl>
                      <dt>AppleiPhone 11</dt>
                      <dd>￥4699.00</dd>
                    </dl>
                    <i>2</i>
                    <img src="./img/hs2.jpg" alt="" />
                    <dl>
                      <dt>AppleiPhone 11</dt>
                      <dd>￥4699.00</dd>
                    </dl>
                    <b>3</b>
                    <img src="./img/hs3.jpg" alt="" />
                    <dl>
                      <dt>AppleiPhone 11</dt>
                      <dd>￥4699.00</dd>
                    </dl>

                    <img src="./img/hs4.jpg" alt="" />
                    <dl>
                      <dt>AppleiPhone 11</dt>
                      <dd>￥4699.00</dd>
                    </dl>

                    <img src="./img/hs4.jpg" alt="" />
                    <dl>
                      <dt>AppleiPhone 11</dt>
                      <dd>￥4699.00</dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bigbox">
          <div class="tab-nav">
            <ul class="clearfix">
              <li class="current"><a href="#">商品介绍</a></li>
              <li><a href="#">规格与包装</a></li>
              <li><a href="#">售后保障</a></li>
              <li><a href="#">商品评价</a></li>
              <li><a href="#">商品介绍</a></li>
              <li><a href="#">商品介绍</a></li>
            </ul>
          </div>
          <div class="box-nav">
            <div class="item" style="display: block">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
            <div class="item">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
            <div class="item">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
            <div class="item">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
            <div class="item">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
            <div class="item">
              <!-- 参数 -->
              <div class="canshu">
                <div class="cs-list1">
                  <ul>
                    <li>品牌小米 （MI）</li>
                  </ul>
                </div>
                <div class="cs-list2">
                  <ul>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                    <li>产品详情故人西辞黄鹤楼烟花三月下扬州</li>
                  </ul>
                </div>
                <div class="more"><a href="#">更多参数>></a></div>
              </div>
            </div>
          </div>
          <div class="hot clearfix">
            <h1>热卖推荐</h1>
            <ul class="clearfix">
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./img/hot.png" alt="" /></a>
              </li>
            </ul>
            <div class="look"><a href="#">点击前往&nbsp查看更多新品>></a></div>
          </div>
          <div class="pic">
            <img src="./img/pic2.jpg" alt="" />
            <img src="./img/pic3.jpg" alt="" />
            <img src="./img/pic4.jpg" alt="" />
            <img src="./img/pic5.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 产品preduct E  -->

    <!-- 页脚s  -->
    <!-- <div class="footer">
      <div class="w">
        <div class="foo-t">
          <ul>
            <li>
              <div class="box"></div>
              <div class="pp">
                <h3>正品保障</h3>
                <p>正品保障,提供发票</p>
              </div>
            </li>
            <li>
              <div class="box"></div>
              <div class="pp">
                <h3>正品保障</h3>
                <p>正品保障,提供发票</p>
              </div>
            </li>
            <li>
              <div class="box"></div>
              <div class="pp">
                <h3>正品保障</h3>
                <p>正品保障,提供发票</p>
              </div>
            </li>
            <li>
              <div class="box"></div>
              <div class="pp">
                <h3>正品保障</h3>
                <p>正品保障,提供发票</p>
              </div>
            </li>
            <li>
              <div class="box"></div>
              <div class="pp">
                <h3>正品保障</h3>
                <p>正品保障,提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="foo-c">
          <div class="c1 fl">
            <dl>
              <dt>购物指南</dt>
              <dd>购物流程</dd>
              <dd>会员介绍</dd>
              <dd>生活旅行/团购</dd>
              <dd>常见问题</dd>
              <dd>大家电</dd>
              <dd>联系客服</dd>
            </dl>
          </div>
          <div class="c2 fl">
            <dl>
              <dt>配送法式</dt>
              <dd>上门自提</dd>
              <dd>211限时达</dd>
              <dd>配送服务查询</dd>
              <dd>配送费收取标准</dd>
              <dd>海外配送</dd>
            </dl>
          </div>
          <div class="c3 fl">
            <dl>
              <dt>支付方式</dt>
              <dd>货到付款</dd>
              <dd>在线支付</dd>
              <dd>分期付款</dd>
              <dd>邮局汇款</dd>
              <dd>公司转账</dd>
            </dl>
          </div>
          <div class="c4 fl">
            <dl>
              <dt>售后服务</dt>
              <dd>售后政策</dd>
              <dd>价格保护</dd>
              <dd>退款说明</dd>
              <dd>返修/退换货</dd>
              <dd>取消订单</dd>
            </dl>
          </div>
          <div class="c5 fl">
            <dl>
              <dt>特色服务</dt>
              <dd>夺宝岛</dd>
              <dd>diy装机</dd>
              <dd>延保服务</dd>
              <dd>品有够E卡</dd>
              <dd>品有够通讯</dd>
            </dl>
          </div>
          <div class="c6 fl">
            <dl>
              <dt>帮助中心</dt>
              <dd><img src="./img/wx_cz.jpg" alt="" /></dd>
              <dd>品有够客户端</dd>
            </dl>
          </div>
        </div>
        <div class="foo-b">
          <a href="#">联系我们 <span>|</span></a>

          <a href="#">联系客服<span>|</span></a>

          <a href="#">商家入驻 <span>|</span></a>

          <a href="#">营销中心 <span>|</span> </a>

          <a href="#">手机品优购 <span>|</span> </a>

          <a href="#">友情链接<span>|</span> </a>

          <a href="#">销售联盟 <span>|</span> </a>

          <a href="#">品优购社区<span>|</span> </a>

          <a href="#">品优购公益 <span>|</span> </a>

          <a href="#">English Site <span>|</span> </a>

          <a href="#">Contact U</a> <br /><br />

          <p>
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
            电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
          </p>
          <p>京ICP备08001421号京公网安备110108007702</p>
        </div>
      </div>
    </div> -->
  </body>
</html>
